<template>
    <div>
        <div class="c">
            <div class="i"></div>
        </div>
    </div>
    <div>
        <imgView :src="list[0].url" fit="cover"/>
        <imgView :src="list[0].url" fit="contain"/>
        <imgView :src="list[0].url" fit="fill"/>
        <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 71.6,37.5 100,37.5 75,65 50,75 25,65 0,37.5 28.4,37.5" style="fill:yellow;stroke:orange;stroke-width:2"/>
</svg>
        <!-- <imgView :url="list[0].url" type="cover"/> -->
    </div>
</template>
<script setup lang="ts">
import imgView from './imgView.vue'
const list =[
    {
        url:getImageUrl('99')
    },
    {
        url:getImageUrl('44')
    },
    {
        url:getImageUrl('66')
    },
    {
        url:getImageUrl('88')
    },
]
function getImageUrl(name:string) {
    return new URL(`../../assets/imgs/${name}.jpg`, import.meta.url).href;
}
function http1(){

}
function http2(){
    
}
async function mockhttp(){

    await http1()
    await http2()
}
</script>

<style scoped>
.c{
    width: 300px;
    height: 300px;
    display: flex;
    border: 1px solid #ccc;
}
.i{
    width: 100px;
    height: 100px;
    margin:auto;
    background-color: red;
    border-radius: 50%;

}
</style>